<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li class="box">3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      /*
            call的使用场景
            1. 借用构造函数实现属性的继承
            2. 可以让伪数组，借用数组的方法
        */

      // 得到一个伪数组
      let lis = document.getElementsByTagName('li')
      // for (var i = 0; i < lis.length; i++) {
      //   lis[i].onclick = function () {
      //     console.log(i);
      //   }
      // }


      // 1.forEach的内部实现 ---> forEach内部遍历的就是this
      // Array.prototype.forEach = function(callback){
      //     for(var i = 0; i < this.length; i++){
      //         callback(this[i],i)
      //     }
      // }



      // 2.借用:伪数组借用数组方法
      Array.prototype.forEach.call(lis, (e, i) => {
        console.log(e, i);
        e.onclick = function () {
          console.log(i);
        }
      })

      // 3.借用：伪数组寻找类为box的下标
      // let box = document.querySelector('.box')
      // let index = Array.prototype.indexOf.call(lis, box)
      // console.log(index);

      // 4.如果不借用，要如何实现伪数组查找元素
      let box = document.querySelector('.box')
      let index = -1
      for (let i = 0; i < lis.length; i++) {
        if (box === lis[i]) {
          index = i
        }
      }
      console.log(index);
    </script>
  </body>

</html>